<template>
    <div class="creativecenter">
        <main-header></main-header>
        <div class="container">
            <div class="left">
                <el-menu
                        default-active="2"
                        class="el-menu-vertical-demo"
                        @open="handleOpen"
                        @close="handleClose">
                    <el-menu-item-group>
                        <template slot="title"><span><i class="iconfont icon-renyuanbianji"></i>创作中心</span></template>
                        <div class="el">
                            <el-menu-item index="1-1" @click="gowhome()">主页</el-menu-item>
                            <el-menu-item index="1-2" @click="gowcenter()">活动中心</el-menu-item>
                        </div>
                    </el-menu-item-group>
                    <el-menu-item-group >
                        <template slot="title"><span><i class="iconfont icon-bi"></i>创作</span></template>
                        <div class="el">
                           <el-menu-item index="2-1" @click="goquestcenter()">问题推荐</el-menu-item>
                           <el-menu-item index="2-2" @click="goquestupload()">上传视频</el-menu-item>
                           <el-menu-item index="2-3"><a style="color:black" href="https://www.zhihu.com/xen/market/ecom-page/1276939280917594112">创作者学院</a></el-menu-item>
                           <el-menu-item index="2-4"><a style="color:black" href="https://www.zhihu.com/knowledge-plan/roundtable-manual">圆桌手册</a></el-menu-item>
                        </div>
                    </el-menu-item-group>
                    <el-menu-item-group>
                        <template slot="title"><span><i class="iconfont icon-shuju1"></i>创作数据</span></template>
                        <div class="el">
                            <el-menu-item index="3-1"><a style="color:black" href="https://www.zhihu.com/creator/analytics/work/answers">内容分析</a> </el-menu-item>
                            <el-menu-item index="3-2"><a style="color:black" href="https://www.zhihu.com/creator/creative-list">创作榜单</a> </el-menu-item>
                        </div>
                    </el-menu-item-group>
                    <el-menu-item-group>
                        <template slot="title"><span><i class="iconfont icon-xingxing"></i>更多曝光</span></template>
                        <div class="el">
                            <el-menu-item index="4-1"><a tyle="color:black" href="https://www.zhihu.com/creator/recommend">内容自荐</a></el-menu-item>
                            <el-menu-item index="4-2">自定义推广</el-menu-item>
                            <el-menu-item index="4-3">圆桌主持人</el-menu-item>
                            <el-menu-item index="4-4">专题主持人</el-menu-item>
                        </div>
                    </el-menu-item-group>
                    <el-menu-item-group>
                        <template slot="title"><span><i class="iconfont icon-yanmai"></i>内容创作</span></template>
                        <div class="el">
                            <el-menu-item index="5-1">赞赏功能</el-menu-item>
                            <el-menu-item index="5-2">好物推荐</el-menu-item>
                            <el-menu-item index="5-3">知乎live</el-menu-item>
                            <el-menu-item index="5-4">品牌任务</el-menu-item>
                            <el-menu-item index="5-5">视频收益</el-menu-item>
                        </div>
                    </el-menu-item-group>
                    <el-menu-item-group>
                        <template slot="title"><span><i class="iconfont icon-moban"></i>账号</span></template>
                        <div class="el">
                            <el-menu-item index="6-1">创作者等级</el-menu-item>
                            <el-menu-item index="6-2">权益中心</el-menu-item>
                            <el-menu-item index="6-3">账号信息</el-menu-item>
                            <el-menu-item index="6-4">常见问题</el-menu-item>
                        </div>
                    </el-menu-item-group>
                    <el-menu-item-group>
                        <template slot="title"><span><i class="iconfont icon-changjianwenti"></i>其他</span></template>
                        <div class="el">
                            <el-menu-item index="7-1">瓦力保镖</el-menu-item>
                            <el-menu-item index="7-2">版权服务</el-menu-item>
                        </div>

                    </el-menu-item-group>
                </el-menu>
            </div>
            <div class="right">
                <router-view></router-view>

            </div>
        </div>
    </div>
</template>

<script>
    import MainHeader from "../../components/MainHeader";
    export default {
        name: "CreativeCenter",
        components: {MainHeader},
        methods: {
            handleOpen(key, keyPath) {
                console.log(key, keyPath);
            },
            handleClose(key, keyPath) {
                console.log(key, keyPath);
            },
            gowhome(){
                this.$router.push({name:'Whome'})
            },
            gowcenter(){
                this.$router.push({name:'WactiveCenter'})
            },
            goquestcenter(){
                this.$router.push({name:'QuestRecommend'})
            },
            goquestupload(){
                this.$router.push({name:'upload'})
            }
        }
    }
</script>

<style scoped>
    .creativecenter{
        padding-top: 90px;
        width: 100%;
        background: #f6f7f8;

    }
    .creativecenter .container{
        width: 80%;
        margin: 0 auto;
    }

    .container .left i {
        padding-right: 5px;
        font-size: 20px;
        font-weight: bold;
        color: #444444;
    }
    .container .left span {
        font-weight: bold;
        font-size: 14px;
        color: #444444;
    }
    .creativecenter .left{
        display: inline-block;
        box-sizing: border-box;
        width: 17%;
        cursor: pointer;
        box-shadow: 0 6px 10px 0 rgba(133,144,166,.06);
    }
    .el {
        margin-left: 20px;
    }
    .creativecenter .right{
        box-sizing: border-box;
        width:82%;
        background: white;
        border-radius: 3px;
        float: right;
        height: 200px;
        cursor: pointer;
        box-shadow: 0 6px 10px 0 rgba(133,144,166,.06);
    }

</style>
